<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="../css/font.css">
        <link rel="stylesheet" href="../css/xadmin.css">
        <script type="text/javascript" src="../js/global.js" ></script>
        <script type="text/javascript" src="../lib/layui/layui.js" ></script>
	</head>
	<body>
		<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
        	<!--按条件查询-->
		<div class="layui-form-item" style="margin-top: 10px; margin-left:10px">
			<form class="layui-form" method="post" onsubmit="return false;">
				<label class="layui-form-mid">用户名:</label> 
				<div class="layui-input-inline" style="width:100px;"> 
					<input type="text" id="Name" name="Name" autocomplete="off" class="layui-input"> 
				</div>
				<label class="layui-form-mid">起止时间:</label>
				<div class="layui-input-inline" style="width:100px;">
					<input type="text" name="begin" id="begin" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"> 
				</div>
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width:100px;"> 
					<input type="text" name="end" id="end" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"> 
				</div>   
				<label class="layui-form-mid">签到状态:</label> 
				<div class="layui-input-inline" style="width:100px;"> 
					<select id="cc" name="cc"> 
						<option value="">请选择</option> 
						<option value="已签到">已签到</option> 
						<option value="已签退">已签退</option>
					</select>
				</div>
				<div class="layui-input-inline" style="width:100px;">
					<button class="layui-btn" id="search" data-type="reload">搜索</button> 
				</div> 
			</form>  
		</div>
        	<table class="layui-table" id="demo" lay-filter="test"></table>
        </div>
        <script>
        	layui.use(['laydate', 'layer', 'table', 'form','transfer'], function() {
				var laydate = layui.laydate //日期
					,layer = layui.layer //弹层
					,table = layui.table //表格
					,form = layui.form //轮播
					,transfer=layui.transfer
					,$=layui.$;
					
				//日期
				laydate.render({
					elem: '#begin'
				});
				laydate.render({
					elem: '#end'
				});
				//执行一个 table 实例
				/*数据表格渲染*/
				table.render({
					elem:"#demo",
					url:globalData.server+"getUserCheck",
					where:{'token':globalData.getCurToken()},
					method:"post",
					page:true,
					parseData:function(res){
						  return{
							  "code":0,
							  "msg":"1",
							  "count":res.totalElements,
							  "data":res.content
						  }
					 },
					cols:[[
						{field:'username',title:'用户名'},
						{field:'checkintime',title:'签到时间'},
						{field:'checkstate',title:'状态'},
						{field:'checkouttime',title:'签退时间'}
					]],
					id:'testReload',
					toolbar:'#toolbar',
					
				});	
				//数据重载
				
				//查询操作 
				active={
				reload:function(){
					var Name=$("#Name").val();
					var begin=$("#begin").val();
					var end=$("#end").val();
					var cc=$("#cc").val();
					table.reload("testReload",{
						where:{
						"token":globalData.getCurToken(),
						"name":Name,
						"btime":begin,
						"etime":end,
						"state":cc,
						"roleids":globalData.getRoleids()
						}
						 
					})
				}
			}
				$("#search").on("click",function(){
					var type=$(this).data("type");
					active[type]?active[type].call(this):"";
				});
        	})
        </script>
	</body>
</html>
